<template>
  <div style="display: flex; flex-direction: column; align-items: center; margin: 0 50px 0 50px; height: 100%;">
    <div style="margin-top: 20px;">{{ robotQueueNowRes.robotTitle }}</div>
    <el-image style="width: 300px; height: 300px; margin-top: 20px;"
              :src="realRobotImage(robotQueueNowRes.robotImage)"/>
    <el-table :data="robotQueueNowRes.alls" border style="margin-top: 20px; width: 800px;">
      <el-table-column prop="userName" align="center" label="用户姓名"/>
      <el-table-column prop="orderNo" align="center" label="订单编号"/>
      <el-table-column prop="statusStr" align="center" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '2' || scope.row.status === '3' ? 'success' : 'danger'">
            {{ scope.row.statusStr }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <!--只有状态为3的才可以操作-->
          <el-button v-if="scope.row.status === '3'" link type="primary" @click="deal(scope.row)"
                     v-hasPermi="['qd:robot:edit']">处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {listRobotQueueNow} from "@/api/qd/queue.js";
import {useRoute} from "vue-router";
import {isExternal} from "@/utils/validate.js";
import {completedOrder} from "@/api/qd/order.js";

const route = useRoute();
const {proxy} = getCurrentInstance();

const robotQueueNowRes = ref({});

onMounted(() => {
  // 定时调用 listRobotQueueNowF
  setInterval(listRobotQueueNowF, 5000);
});

const listRobotQueueNowF = () => {
  listRobotQueueNow(route.params.sn).then(res => {
    robotQueueNowRes.value = res.data;
    // 状态为呼叫中的，呼叫
    let call = res.data.call;
    if (call != null) {
      say(`请${call.nickName}到${res.data.robotTitle}取优惠券`);
    } else {
      window.speechSynthesis.cancel();
    }
  })
}

const say = (text) => {
  console.log(text);
  const msg = new SpeechSynthesisUtterance();
  msg.text = text;     // 文字内容
  msg.lang = "zh-CN";  // 使用的语言:中文
  msg.volume = 1;      // 声音音量：0-1
  msg.rate = 1;        // 语速：0-10
  msg.pitch = 1;       // 音高：0-1
  window.speechSynthesis.speak(msg);    // 播放
};

const deal = (row) => {
  proxy.$modal.alertSuccess('处理完毕，请及时取走您的优惠券!');
  completedOrder(row.orderId).then(res => {
    listRobotQueueNowF();
  })
};

const realRobotImage = (robotImage) => {
  if (!robotImage) {
    return;
  }
  if (isExternal(robotImage)) {
    return robotImage;
  }
  return import.meta.env.VITE_APP_BASE_API + robotImage;
};

</script>
